<template>
  <Layout>
    <el-form :rules="rules" :model="form" label-position="top">
      <el-form-item label="家长电话" prop="parentPhone">
        <el-input v-model="form.parentPhone" disabled />
      </el-form-item>
      <el-form-item label="请假条类型" prop="detailType">
        <el-select v-model="form.detailType" style="width: 100%">
          <el-option v-for="item in detailedTypeOptions" :key="item.id" :label="item.label"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请假开始时间" prop="startTime">
        <el-date-picker :disabled-date="disabledDate" :clearable="false" :editable="false" v-model="form.startTime"
          value-format="YYYY-MM-DD HH:mm" type="datetime"></el-date-picker>
      </el-form-item>
      <el-form-item label="请假结束时间" prop="endTime">
        <el-date-picker :disabled-date="disabledDate" :clearable="false" :editable="false" v-model="form.endTime"
          value-format="YYYY-MM-DD HH:mm" type="datetime"></el-date-picker>
      </el-form-item>
      <el-form-item label="是否离深" prop="leaveSz">
        <el-select v-model="form.leaveSz">
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="9"></el-option>
        </el-select>
      </el-form-item>
      <KeepAlive><el-form-item prop="Destination" v-if="form.leaveSz == 1" label="去往目的地">
          <el-select style="width: 30%; padding-right: 10rem" v-model="form.province">
            <el-option v-for="(item, index) in pcaTextArr" :label="item.label" :value="index"></el-option>
          </el-select>
          <el-select style="width: 30%; padding-right: 10rem" v-model="form.city">
            <el-option v-for="(item, index) in pcaTextArr[form.province]
      .children" :label="item.label" :value="index"></el-option>
          </el-select>
          <el-select style="width: 30%; padding-right: 10rem" v-model="form.district">
            <el-option v-for="(item, index) in pcaTextArr[form.province]
      .children[form.city].children" :label="item.label" :value="index"></el-option>
          </el-select> </el-form-item></KeepAlive>
      <el-form-item label="请假班级" prop="className">
        <el-select v-model="form.className">
          <el-option :label="form.className" :value="form.className" />
        </el-select>
      </el-form-item>
      <el-form-item label="审批人" prop="headTeacherName">
        <el-select v-model="form.headTeacherName">
          <el-option :label="form.headTeacherName" :value="form.headTeacherName" />
        </el-select>
      </el-form-item>
      <el-form-item label="请假理由" prop="reason">
        <el-input maxlength="50"  placeholder="请输入请假理由" show-word-limit type="textarea" v-model="form.reason" />
      </el-form-item>
      <el-form-item label="上传图片证明">
        <upload @upload="UpdateFileList"></upload>
      </el-form-item>
      <el-form-item>
        <el-checkbox label="家长审批" v-model="form.state" :true-label="1" :false-label="0" :disabled="true" size="large" />
      </el-form-item>
      <el-form-item>
        <div style="
                        width: 100%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    ">
          <el-button style="width: 90%" size="large" type="primary" @click="onSubmit">立即申请</el-button>
        </div>
      </el-form-item>
    </el-form>
  </Layout>
</template>

<script setup>
import { ref } from 'vue';
import { pcaTextArr } from 'element-china-area-data';
import upload from './component/upload.vue';
import { reqSave } from '@/api/student';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import Layout from './component/Layout.vue';
import { getClassInfo } from './component/commit.js';

const router = useRouter();

const detailedTypeOptions = ref([
  { id: 1, label: '事假（因公请假，需说明情况）' },
  { id: 2, label: '病假（需提供医生证明）' },
  { id: 3, label: '补假（需提供医生证明）' },
  { id: 6, label: '事假（因私请假，需提供请假证明）' }
]);

const form = ref({
  // 家长电话
  parentPhone: '',
  // 请假类型
  detailType: 6,
  // 开始时间
  startTime: '',
  // 结束时间
  endTime: '',
  // 是否离深
  leaveSz: 9,
  // 省
  province: 1,
  // 市
  city: 0,
  // 区
  district: 0,
  //班级
  className: '',
  //班主任
  headTeacherName: '',
  //请假理由
  reason: '',
  //老师电话
  teacher_number: '',
  // 是否家长审批
  state: 1
});

const rules = ref({
  parentPhone: [
    { required: true, message: '请输入家长电话', trigger: 'blur' }
  ],
  detailType: [
    { required: true, message: '请选择请假类型', trigger: 'change' }
  ],
  startTime: [
    { required: true, message: '请填写请假开始时间', trigger: 'change' }
  ],
  endTime: [
    { required: true, message: '请填写请假结束时间', trigger: 'change' }
  ],
  leaveSz: [{ required: true, message: '请选择是否离深', trigger: 'change' }],
  Destination: [
    { required: true, message: '请选择目的地', trigger: 'change' }
  ],
  className: [{ required: true, message: '请输入班级名称', trigger: 'blur' }],
  headTeacherName: [
    { required: true, message: '请输入班主任姓名', trigger: 'blur' }
  ],
  reason: [{ required: true, message: '请输入请假理由', trigger: 'blur' }]
});

//图片id
let FileList = [];
const getDateformat = date => {
  const y = date.getFullYear();
  let m = date.getMonth() + 1;
  let d = date.getDate();
  let h = date.getHours();
  let mm = date.getMinutes();
  m = m < 10 ? '0' + m : m;
  d = d < 10 ? '0' + d : d;
  h = h < 10 ? '0' + h : h;
  mm = mm < 10 ? '0' + mm : mm;
  return y + '-' + m + '-' + d + '+' + h + '%3A' + mm;
};
const onSubmit = async () => {
  const start = new Date(form.value.startTime);
  const end = new Date(form.value.endTime);
  const subForm = {
    class_id: '',
    detailedType: form.value.detailType,
    endTime: Date.parse(new Date(form.value.endTime)),
    end_time: getDateformat(end),
    form: 6,
    imageIds: FileList,
    leaveSz: form.value.leaveSz,
    leavePlace: '',
    leaveType: 1,
    parentPhone: form.value.parentPhone,
    reason: form.value.reason,
    startTime: Date.parse(new Date(form.value.startTime)),
    start_time: getDateformat(start),
    state: form.value.state,
    teacher_number: form.value.teacher_number
  };

  if (form.value.leaveSz === 1) {
    subForm.leavePlace = `${pcaTextArr[form.value.province].value}${pcaTextArr[form.value.province].children[form.value.city].value
      }${pcaTextArr[form.value.province].children[form.value.city].children[
        form.value.district
      ].value
      }`;
  }
  try {
    const result = await reqSave(subForm);
    if (result.status === '200') {
      ElMessage({
        type: 'success',
        message: '申请成功'
      });
      router.push('/student/index');
    }
  } catch (error) { }
};

const UpdateFileList = result => {
  FileList = result.data;
};

const disabledDate = data => {
  if (data.getTime() < Date.now() - 1000 * 60 * 60 * 24) {
    return true;
  } else {
    return false;
  }
};

const getclassinfo = async () => {
  const data = await getClassInfo();
  console.log(data);
  form.value.className = data.className;
  form.value.headTeacherName = data.headTeacherName;
  form.value.parentPhone = data.parentPhone;
};
getclassinfo();
</script>

<style lang="scss" scoped></style>
